<template>
  <div class="chart1">
     年： <el-date-picker size="small" v-model="searchYear" value-format="yyyy" type="year" placeholder="选择年份" />
      <div id="chart1" ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { areaTrend } from '@/api/system/order'

export default {
  data() {
    return {
      searchYear: new Date().getFullYear().toString()
    }
  },
  watch: {
    searchYear: {
      handler(newVal) {
        this.init()
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const chartDom = document.getElementById('chart1')
      const myChart = echarts.init(chartDom)
      myChart.showLoading()
      areaTrend({ searchYear: this.searchYear }).then(res => {
        // console.log(res.data)
        this.initChart(res.data)
        myChart.hideLoading()
      })
    },
    initChart(res) {
      // console.log(res[1]);
      const chartDom = document.getElementById('chart1')
      const myChart = echarts.init(chartDom)
      const data1=res[1]?res[1].map(item=>item.newJpyAmount):[]
      const data2=res[2]?res[2].map(item=>item.newJpyAmount):[]
      const data3 = res[3] ? res[3].map(item => item.newJpyAmount) : []



      const option = {
        title: {
          text: '趋势图',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['中国大陆', '台湾地区', '日本'],
          bottom: '0'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          min: 0,
        },
        series: [
          {
            name: '中国大陆',
            type: 'line',
            data: data1,
            itemStyle: {
              color: '#4169E1'
            }
          },
          {
            name: '台湾地区',
            type: 'line',
            data: data2,
            itemStyle: {
              color: '#FFA500'
            }
          },
          {
            name: '日本',
            type: 'line',
            data: data3,
            itemStyle: {
              color: '#FFD700'
            }
          }
        ]
      }

      option && myChart.setOption(option)

      // 添加响应式调整
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart1 {
  width: 100%;
  height: 100%;
  font-size: 12px;

  #chart1 {
    height: 100%;
  }
}
</style>
